<template>
  <view>
    <u-popup v-model="localShow" :mask-close-able="true" closeable="true" mode="bottom" height="300rpx" border-radius="8rpx" @close="closeAction">
      <view class="share-view">
        <view class="share-action" v-for="(item, index) in shareActions" @tap="showAction(item, index)" :key="index">  
          <image style="width: 116rpx;height: 116rpx;" :src="item.src"></image>
          <text class="share-title">{{ item.title }}</text>
        </view>
      </view>
    </u-popup>
    <view v-if="localShow" class="shareView">
      <view class="shareContent">
        <image class="img" :src="aiCoverImg"></image>
        <view style="margin: 32rpx;">
          <view class="share-content-title">{{ itemObj.interviewTitle }}</view>
          <view class="share-content-text">{{ getMdate(itemObj.validStartTime) }}</view>
          <view class="share-content-text">-</view>
          <view class="share-content-text">{{ getMdate(itemObj.validEndTime) }}</view>
          <!-- <view class="share-content-tip">
            <view class="share-content-text">微信扫一扫</view>
            <view class="share-content-text">小程序快捷面试</view>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// import ShareMixin from "@/mixins/share";
import common from '@/api/common.js';
import { interviewDomain } from "@/api/root";
export default {
  // mixins: [ShareMixin],
  props: {
    show: {
      type: Boolean,
      default: false,
    },

    itemObj: {
      type: Object,
      default: function() {
        return {
          id: "1665531282287673345",
          interviewStatus: "started",
          interviewStatusName: "已开始",
          interviewTitle: "测试招聘6",
          resultNum: 0,
          validEndTime: 1687665600000,
          validStartTime: 1685923200000,
        };
      },
    },
  },

  data() {
    return {
      localShow: false,
      aiCoverImg: this.$imgBaseSelf + "interview/aiCover.png",
      shareActions: [
        {
          src: this.$imgBaseSelf + "interview/aiCopy.png",
          title: "复制面试链接",
        },
        // {
        //   src: this.$imgBaseSelf + "interview/aiDownload.png",
        //   title: "保存图片",
        // },
        // {
        //   src: this.$imgBaseSelf + "interview/aiShareWX.png",
        //   title: "微信好友",
        // },
      ],
    };
  },

  watch: {
    show(val) {
      console.log("🚀 ~ file: InterviewShareView.vue:74 ~ show ~ val:", val)
      this.localShow = val;
    }
  },

  methods: {
    getMdate(date) {
      return common.getMinuteTime(date) 
    },
    closeAction() {
      this.$emit('close', this.itemObj)
      // this.localShow = false;
      // console.log("🚀 ~ file: InterviewShareView.vue:77 ~ shareClose ~ this.localShow:", this.localShow)
    },

    showAction(item, index) {
      if (index == 0) {
        this.clipboardAction(item.src);
      } 
      // else if (index == 1) {
      //   this.saveToAlbum();
      // } 
      else {
        console.log(222222);
        // this.sharePath = "http://m.1001.job1001.com/aiInterview/index.html?interviewNumber=" + this.itemObj.id
        this.share();
      }
    },

    // 复制链接
    // data: "面试链接：https://m.1001.job1001.com/aiInterview/index.html?num=" + this.itemObj.interviewNumber, 
    clipboardAction(text) {
      uni.setClipboardData({
          data: "面试链接："+ interviewDomain +"/aiInterview/index.html?num=" + this.itemObj.interviewNumber,
          success: function(res) {
            uni.showToast({
              title: "复制成功",
              icon: "success",
            });
          },
        });
    },

    // 保存图片到相册
    saveToAlbum() {
      console.log("---saveToAlbum");
      this.savePosterPath(
        "https://img3.job1001.com/ypMp/elan/images/select.png"
      );
      // this.savePosterPath(this.posisionDetailData.qrCode);
    },
    savePosterPath(url) {
      let that = this;
      uni.showLoading({
        title: "正在保存图片...",
      });
      //获取用户的当前设置。获取相册权限
      uni.getSetting({
        success: (res) => {
          //如果没有相册权限
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            //向用户发起授权请求
            uni.authorize({
              scope: "scope.writePhotosAlbum",
              success: () => {
                //授权成功保存图片到系统相册
                uni.hideLoading();
                that.saveNetImageToLocal(url);
              },
              //授权失败
              fail: () => {
                uni.hideLoading();
                uni.showToast({
                  title: "未授权保存图片到相册！",
                });
              },
            });
          } else {
            console.log("saveNetImageToLocal");
            that.saveNetImageToLocal(url);
          }
        },
        fail: (res) => {},
      });
    },
    //保存网络图片到本地
    saveNetImageToLocal(url) {
      uni.downloadFile({
        url: url,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: (res) => {
                console.log("保存成功", res);
                uni.hideLoading();
                setTimeout(() => {
                  return uni.showToast({
                    title: "保存成功！",
                    duration: 1500,
                  });
                }, 200);
              },
              fail: (res) => {
                console.log("保存失败", res);
                uni.hideLoading();
                console.log(res.errMsg);
                if ("saveImageToPhotosAlbum:fail cancel" == res.errMsg) {
                  return uni.showToast({
                    title: "取消保存",
                  });
                } else {
                  return uni.showToast({
                    title: "保存失败",
                  });
                }
              },
              //无论成功失败都走的回调
              complete: (res) => {
                uni.hideLoading();
              },
            });
          } else {
            console.log("网络错误", res);
            uni.showToast({
              title: "网络错误",
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.share-view {
  display: flex;
  justify-content: space-around;
  position: absolute;
  top: 70rpx;
  width: 100%;

  .share-action {
    // width: 150rpx;
    // height: 150rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .share-title {
    color: #555;
    margin-top: 20rpx;
    font-size: 26rpx;
  }

  .btn-share {
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
  }
}

.shareView {
  display: flex;
  justify-content: center;
  width: 100%;
  position: absolute;
  top: 5%;

  .shareContent {
    width: 540rpx;
    height: 776rpx;
    background-color: white;
    z-index: 10076;
    border-radius: 16rpx;

    .img {
      height: 290rpx;
      width: 100%;

    }

    .share-content-title {
      font-size: 36rpx; 
      font-weight: 800;
      margin-bottom: 50rpx;
    }
    .share-content-text {
      color: #555; 
      font-size: 32rpx;
    }

    .share-content-tip {
      position: absolute;
      bottom: 32rpx;
    }
  }

  .btn-share {
    padding: 0;
    border: none;
    background-color: transparent;
  }
}
</style>
